import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { toJS } from 'mobx'
import Head from "components/Head";
import Child from './Child'
import { Button, Input } from "antd";
import "./index.less";

const prefixCls = `Home`;

@inject(stores => {
  const { homeStore } = stores;
  const { city, author, changeHomeData } = homeStore;
  return {
    city,
    author,
    changeHomeData
  };
})
@observer
class Home extends Component {

  constructor(){
    super()
    this.childRef = React.createRef()
  }

  componentDidMount() {
    this.props.changeHomeData();
    this.childRef.current.getRefFunc()
    // console.log("ref控制台",)
  }

  // 点击控制台打印
  onClickBtn0() {
    console.log("btn0", this);
  }
  onClickBtn1 = () => {
    console.log("btn1", this);
  };
  onClickBtn2 = value => {
    console.log(value, this);
  };
  onChangeInput = e => {
    console.log(e.target.value);
  };

  render() {
    return (
      <>
        <Head></Head>
        <div className={prefixCls}>
          <p>{`${this.props.city}--${this.props.author}`}</p>
          <p>模版字符串：{`10/20`}</p>
          <p>模版字符串：{`${10/20}`}</p>

          <Button type="primary" onClick={this.onClickBtn0}>
            错误示例
          </Button>
          <Button type="primary" onClick={this.onClickBtn1}>
            属性初始化语法
          </Button>
          <Button
            type="primary"
            onClick={() => {
              this.onClickBtn2("btn3");
            }}
          >
            render中使用箭头函数
          </Button>
          <Input
            placeholder="Basic usage"
            style={{ width: 300 }}
            onChange={this.onChangeInput}
          />
          <Child ref={this.childRef} />
        </div>
      </>
    );
  }
}

export default Home;
